<template>
  <div>
    <h2>员工列表</h2>

    <!-- 新增按钮 -->
    <div style="margin-bottom: 12px">
      <el-button type="primary" @click="openAdd">新增员工</el-button>
    </div>

    <!-- 列表 -->
    <el-table :data="users" stripe style="width: 100%">
      <el-table-column prop="id" label="ID" width="80" />
      <el-table-column prop="username" label="用户名" />
      <el-table-column prop="phone" label="电话" />
      <el-table-column label="状态">
        <template #default="scope">
          <el-tag :type="scope.row.isActive ? 'success' : 'danger'">
            {{ scope.row.isActive ? '启用' : '禁用' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="createdAt" label="创建时间" />
      <el-table-column label="操作" width="100">
        <template #default="scope">
          <el-button size="small" type="danger" @click="remove(scope.row.id)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 新增弹窗（仅电话） -->
    <el-dialog v-model="showAdd" title="新增员工" width="320">
      <el-form :model="form" label-width="60">
        <el-form-item label="电话">
          <el-input v-model="form.phone" placeholder="11位手机号" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showAdd = false">取消</el-button>
        <el-button type="primary" :loading="loading" @click="confirmAdd">
          确定
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useAuthStore } from '@/stores/auth'
import { jwtDecode } from 'jwt-decode'
import request from '@/api/request'

interface User {
  id: number
  username: string
  phone: string
  isActive: boolean
  createdAt: string
}

/* 1. 从 token 解析当前门店 id */
interface JwtPayload {
  storeId: number
}
const auth = useAuthStore()
const storeId = ref<number>(
  auth.token ? (jwtDecode<JwtPayload>(auth.token) as JwtPayload).storeId : 0
)

/* 2. 列表数据 */
const users = ref<User[]>([])
const load = () =>
  request
    .get('/manager/waiters', { params: { storeId: storeId.value } })
    .then(res => (users.value = res.data))

/* 3. 新增员工 */
const showAdd = ref(false)
const loading = ref(false)
const form = reactive({ phone: '' })

const openAdd = () => {
  form.phone = ''
  showAdd.value = true
}

const confirmAdd = () => {
  if (!form.phone) {
    ElMessage.warning('请输入电话')
    return
  }
  loading.value = true
 request.post(
  `/auth/waiter?` +
  `storeId=${storeId.value}&` +
  `name=&` +               // 后端目前强制要求，先传空串占位
  `phone=${encodeURIComponent(form.phone)}&` +
  `password=123456`
)
    .then(() => {
      ElMessage.success('新增成功')
      showAdd.value = false
      load()
    })
    .finally(() => (loading.value = false))
}

/* 4. 删除员工 */
const remove = (id: number) =>
  ElMessageBox.confirm('确定删除该员工？', '提示', { type: 'warning' })
    .then(() => request.delete(`/manager/waiter/${id}`))
    .then(() => {
      ElMessage.success('已删除')
      load()
    })

onMounted(load)
</script>